<template>
  <div class="wrapper">
    <xdh-curd ref="list"
              :filter="false"
              name="formFormList"
              listTitle="表单列表"
              :mixin="mixin"
              :model="formModel"
              model-key="pkValue"
              @on-success="handleSuccess"
              :handleType="'icon'"
              :handleColumnWidth="200">

      <template slot="table-columns" slot-scope="scope">
        <!--<el-table-column type="selection"></el-table-column>-->
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="名称" min-width="100"></el-table-column>
      </template>
      <!--<template slot="table-tool">-->
        <!--<el-button size="mini" @click="changeSkin" plain>换肤</el-button>-->
      <!--</template>-->
      <template slot="table-handle-column" slot-scope="prop">
        <el-tooltip content="管理表单项" placement="top">
          <el-button size="mini" @click="handleFormItem(prop.row)">
            <i class="iconfont icon-dict" style="line-height:0.5;"></i>
          </el-button>
        </el-tooltip>
        <el-tooltip content="预览表单" placement="top">
          <el-button size="mini" @click="viewForm(prop.row)">
            <i class="iconfont icon-play" style="line-height:0.5;"></i>
          </el-button>
        </el-tooltip>
      </template>

      <template slot="dialog-form-items" slot-scope="prop">
        <el-form-item label="模板名称">
          <el-input v-model="prop.model.name"></el-input>
        </el-form-item>
        <el-form-item label="流程定义">
          <el-select v-model="prop.model.processdefinekey">
            <el-option v-for="item in customFlow"
                       :key="item.name"
                       :label="item.label"
                       :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </xdh-curd>
    <!--<xdh-dialog-->
      <!--title="选择皮肤"-->
      <!--:closed.sync="dialogVisible">-->
      <!--<el-radio-group v-model="themeValue">-->
        <!--<el-radio label="">默认</el-radio>-->
        <!--<el-radio label="whiteBlue">白蓝</el-radio>-->
        <!--<el-radio label="green">绿</el-radio>-->
      <!--</el-radio-group>-->
      <!--<span slot="footer" class="dialog-footer">-->
    <!--<el-button @click="dialogCancel()">取 消</el-button>-->
    <!--<el-button type="primary" @click="dialogSave()">确 定</el-button>-->
  <!--</span>-->
    <!--</xdh-dialog>-->
  </div>
</template>
<style type="text/scss" lang="scss" scoped>
  .wrapper {
    height: 100%;
    .el-form {
      height: 100%;
      position: relative;
    }
  }

</style>
<script>
  import XdhCurd from '../../widgets/xdh-curd'
  import formFormList from '../../base/mixin/form-form-list'
  import sysDictionary from '../../base/mixin/sys-dictionary'
  import XdhDialog from '../../widgets/xdh-dialog'
  import {mapState} from 'vuex'
  //
  // const removeTheme = (theme) => {
  //   [...document.getElementsByTagName('link')].forEach(val => {
  //     if (val.dataset.theme && val.dataset.theme !== theme) {
  //       val.parentNode.removeChild(val)
  //     }
  //   })
  // }
  //
  // const createTheme = (theme) => {
  //   const link = document.createElement('link');
  //   link.rel = 'stylesheet';
  //   link.type = 'text/css';
  //   link.href = `/static/css/theme-${theme}.css`;
  //   link.dataset.theme = theme;
  //   document.head.appendChild(link);
  //   link.onload = () => {
  //     removeTheme(theme)
  //   }
  // }
  export default {
    components: {
      XdhCurd,
      XdhDialog
    },
    mixins: [formFormList, sysDictionary],
    data() {
      return {
        customFlow: [],
        dialogVisible: true,
        themeValue: '',
        mixin: formFormList,
        formModel: {
          name: ''
        }
      }
    },
    beforeCreate() {
    },
    mounted() {
      this.themeValue = this.userInfo.themes || ''
    },
    computed: {
      ...mapState({
        userInfo: state => state.userInfo.userInfo || {}
      })
    },
    watch: {
      // themeValue(theme) {
      //   // 有接口先获取当前皮肤
      //   const {currentLink} = this.$store.state.userInfo.userInfo;
      //   if (theme === (currentLink && currentLink.dataset.theme)) {
      //     return;
      //   }
      //
      //   if (theme) {
      //     createTheme(theme)
      //   } else {
      //     [...document.getElementsByTagName('link')].forEach(val => {
      //       if (val.dataset.theme) {
      //         val.parentNode.removeChild(val)
      //       }
      //     })
      //   }
      // }
    },
    methods: {
      handleSuccess(type) {
        if (type === 'add') {
          this.$refs.list.reload()
        }
      },
      // changeSkin() {
      //   this.dialogVisible = false;
      // },
      // dialogCancel() {
      //   if (this.themeValue !== this.userInfo.themes) {
      //     createTheme(this.userInfo.themes)
      //   }
      //   this.themeValue = this.userInfo.themes || ''
      //   this.dialogVisible = true;
      // },
      // dialogSave() {
      //   this.$store.dispatch('PATCH_USER_INFO', {
      //     data: {
      //       themes: this.themeValue,
      //       pkValue: this.userInfo.pkValue
      //     }
      //   }).then(res => {
      //     this.$message({
      //       message: '保存成功!',
      //       type: 'success'
      //     })
      //     this.dialogVisible = true;
      //   }).catch(err => {
      //     this.$message({
      //       message: err + '保存失败!',
      //       type: 'error'
      //     })
      //   })
      // },
      handleFormItem(data) {
        this.$router.push({path: '/clue/itemList?formId=' + data.pkValue + '&formName=' + data.name})
      },
      viewForm(data) {
        window.open(`${window.location.pathname}#/customForm?formId=${data.pkValue}`)
      }
    },
    created() {
      this.getDictList({dictValue: 'procdef'}).then(res => {
        this.customFlow = res
      })
    }
  }
</script>
